<template>
    <div>
      <div class="topBar">
        <!-- 未登录 -->
        <ul v-if="!$store.state.username">
          <li class="welcome_info">欢迎来到天天生鲜</li>
          <li class="login">
            <router-link to="/login" class="linkNode">登录</router-link>
          </li>
          <li class="register">
            <router-link to="/register" class="linkNode">注册</router-link>
          </li>
          <li class="userInfo">
            <router-link to="/userInfo" class="linkNode">用户中心</router-link>
          </li>
          <li class="myCart">
            <router-link to="/myCart" class="linkNode">我的购物车</router-link>
          </li>
          <li class="myOrder">
            <router-link to="/myOrder" class="linkNode">我的订单</router-link>
          </li>
        </ul>

        <!-- 已登录 -->
        <ul v-else>
          <li class="welcome_info">欢迎来到天天生鲜</li>
          <li class="loginUser">
            欢迎您： {{ $store.state.username }}
          </li>
          <li class="logout" @click="doLogout">
            退出
          </li>
          <li class="userInfo">
            <router-link to="/userInfo" class="linkNode">用户中心</router-link>
          </li>
          <li class="myCart">
            <router-link to="/myCart" class="linkNode">我的购物车</router-link>
          </li>
          <li class="myOrder">
            <router-link to="/myOrder" class="linkNode">我的订单</router-link>
          </li>
        </ul>
      </div>
     

    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {};
    },
    props: {},

    components: {},

    created() {
     
    },

    mounted() {
      
    },

    methods: {
        doLogout(){
            localStorage.clear()
            this.$store.state.username = ""
            this.$router.push({path: "/"})
        },
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
* {
    margin: 0;
}

.topBar{
  /* background-color: pink; */
  margin: 0 auto;
}
.topBar ul{
  list-style-type: none;
  height: 30px;
  line-height: 30px; /*上下居中*/
  background-color:#f7f7f7;
	border-bottom: 1px solid #dddddd /*下边框*/
}

.topBar li{
  float: left;
}

.welcome_info{
  margin-left: 10%;
  /* background-color: pink; */
}

.login, .loginUser{
  margin-left: 50%;
}
.register, .logout{
  margin-left: 1%;
}

.userInfo{
  margin-left:1%;
}
.myCart{
  margin-left: 1%;
}
.myOrder{
  margin-left:1%;
}

.login:hover{
  color: orange;
}

.register:hover, .logout:hover{
  color: orange;
  cursor: pointer;
}

.userInfo:hover{
  color: orange;
}
.myCart:hover{
  color: orange;
}

.myOrder:hover{
  color: orange;
}

.linkNode{
  text-decoration-line: none;
  color: #666;
}

.linkNode:hover{
  /* color: orange; */
  color: #ff8800
  /* font-size: 1.1em; */
}
</style>
